<template>
  <div class="spaceManagement">
    <h2>团队成员管理</h2>
    <a-form layout="inline" style="margin-bottom: 16px" @finish="handleSubmit" :model="form">
      <!-- 2. name="userId" 与 form.userId 对应 -->
      <a-form-item label="邀请成员" name="userId">
        <!-- 3. v-model 绑定到 form.userId，而非单独的 userId -->
        <a-input v-model:value="form.userId" placeholder="请输入用户Id" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="margin-left: 16px"> 邀请加入 </a-button>
      </a-form-item>
    </a-form>

    <!-- 表格 -->
    <a-table :columns="columns" :data-source="dataList" :rowKey="(record) => record.id">
      <template #bodyCell="{ column, record }">
        <!--        用户-->
        <template v-if="column.dataIndex === 'userInfo'">
          <a-image :src="record.user.userAvatar" :width="50"></a-image>
          {{ record.user.userName }}
        </template>
        <!--        角色-->
        <template v-else-if="column.dataIndex === 'spaceRole'">
          <a-select
            v-model:value="record.spaceRole"
            style="width: 50%"
            :options="SPACE_ROLE_OPTIONS"
            @change="(value) => editSpaceRole(value, record)"
          ></a-select>
        </template>
        <!-- 时间特殊处理-创建时间 -->
        <template v-else-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a-popconfirm
            title="确认删除?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="deleteById(record.id)"
            @cancel="cancel"
          >
            <a style="display: block">删除</a>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { SPACE_ROLE_ENUM, SPACE_ROLE_OPTIONS } from '@/constants/spaceUser.ts'
import {
  addSpaceUserUsingPost,
  deleteSpaceUserUsingPost,
  editSpaceUserUsingPost,
  listSpaceUserUsingPost,
} from '@/api/spaceUserController.ts'
import { useRoute } from 'vue-router'

// 定义表格数据
const dataList = ref<API.SpaceUserVO[]>([])
//邀请成员加入
const userId = ref<string>()
const route = useRoute()

const spaceId = computed(() => {
  return route.query.spaceId
})

const form = ref({
  userId: ''  // 与表单 item 的 name="userId" 对应
})

// 从后端分页查询数据
async function getPageData() {
  const resp = await listSpaceUserUsingPost({
    spaceId: spaceId.value,
  })
  if (resp.data.code === 0 && resp.data.data) {
    dataList.value = resp.data.data ?? []
  } else {
    message.error('查询用户空间数据失败,' + resp.data.message)
  }
}

async function editSpaceRole(value, record) {
  const resp = await editSpaceUserUsingPost({
    id: record.id,
    spaceRole: value,
  })
  if (resp.data.code === 0) {
    message.success('修改成功')
  } else {
    message.error(resp.data.message)
  }
  getPageData()
}

// 删除
async function deleteById(id: string) {
  const resp = await deleteSpaceUserUsingPost({ id })
  if (resp.data.code === 0) {
    message.success('删除成功')
    getPageData()
  } else {
    message.error('删除失败,' + resp.data.message)
  }
}

async function handleSubmit() {
  const resp = await addSpaceUserUsingPost({
    spaceId: spaceId.value,
    userId: form.value.userId,
    spaceRole: SPACE_ROLE_ENUM.VIEWER,
  })
  if (resp.data.code === 0) {
    message.success('邀请成功')
    getPageData()
  } else {
    message.error(resp.data.message)
  }
}

const cancel = (e: MouseEvent) => {
  message.error('取消')
}

// 页面加载时获取数据
onMounted(() => {
  getPageData()
})

// 表格列
const columns = [
  {
    title: '用户',
    dataIndex: 'userInfo',
    width: '500px',
  },
  {
    title: '角色',
    dataIndex: 'spaceRole',
    width: '500px',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: '500px',
  },
  {
    title: '操作',
    key: 'action',
    width: '500px',
  },
]
</script>

<style scoped>
/* 可以添加一些编辑状态的样式 */
:deep(.ant-table-cell) {
  transition: background-color 0.2s;
}

:deep(.ant-table-cell:hover) {
  background-color: #f5f5f5;
}
</style>
